<template>
    <div>
        <Title>ERP预售出库单出库方式选择</Title>
        <NuxtLayout name="common">
            <div class="erp-select mt-[30px]">
                <t-card title="出库单列表" :bordered="false">
                    <span v-if="isOrder">
                        <t-list>
                            <t-list-item v-for="(item, index) in orderList">
                                <b>{{ item.user.username }} 的预售ERP出库单信息</b>
                                <template #action>
                                    <t-button theme="primary" hover="color" style="margin-left: 16px"
                                        @click="showOrderDetail(index)"> 详情 </t-button>
                                </template>
                            </t-list-item>
                        </t-list>
                    </span>
                    <span v-else>
                        不存在需要操作的出库单，无需查看
                    </span>
                </t-card>
            </div>
            <client-only>
                <div class="dialog-box">
                    <t-dialog :visible="isShowDetail" width="50%" :close-btn="true" confirm-btn="出库" cancel-btn="取消"
                        :on-close="close" :on-confirm="confirmOutWarehouse">
                        <template #header>出库单</template>
                        <template #body>
                            <!-- <span class="text-lg block font-[600]">品名</span>
                            <span class="block" v-for="(item, index) in detailContent.data.goods_list">{{
                    item.goods_title
                }}--------------{{ item.goods_size }}码----------------{{ item.goods_number }}件</span>
                            <span class="text-lg block font-[600]">收货信息</span>
                            <span class="block">收件人：{{ detailContent.data.user.username }}</span>
                            <span class="block">联系电话：{{ detailContent.data.user.phone }}</span>
                            <span class="block">收件地址：{{ detailContent.data.user.address }}</span>
                            <span class="block">预售学校：{{ detailContent.data.user.school }}</span> -->
                            <!-- <span class="text-lg block font-[600]">物流状态</span>
                            <span v-if="detailContent.data.out_warehouse.express_number === ''">
                                <span>暂未发货</span>
                                <span>出货库房：
                                    <t-select v-model:value="warehouse">
                                        <t-option key="jd" label="京东仓" value="jd" />
                                        <t-option key="self" label="自建仓" value="self" />
                                    </t-select>
                                </span>
                            </span>
                            <span v-else>
                                <span class="block">物流单号：{{ detailContent.data.out_warehouse.express_number }}</span>
                                <span class="block">物流出库时间：{{ detailContent.data.out_time }}</span>
                            </span> -->
                        </template>
                    </t-dialog>
                </div>
            </client-only>
        </NuxtLayout>
    </div>
</template>

<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
let date = new Date();
// 是否显示详情
const isShowDetail = ref(false);

// 详情内容
const detailContent = reactive({
    data: {
        content: {
            username: '张三',
            phone: '13800138000',
            address: '重庆市北碚区蔡家岗街道倍都佳园D区'
        },
        goods_list: [],
        sale: {
            order_number: '',
            order_time: '',
            order_from: ''
        },
        out_warehouse: {
            warehouse_name: '',
            out_number: '',
            out_time: '',
            express_number: '',
        }
    }
});

// 关闭dialog
const close = () => {
    isShowDetail.value = false
}

// 当前选中的单裤索引
const currentSelect = ref(0);

// 选择的库房类型
const warehouse = ref('self');



// 确认出库
const confirmOutWarehouse = () => {
    // 获取本地订单表
    let orderTable = localStorage.getItem('orderTable') || [];
    orderTable = JSON.parse(orderTable);

    // 判断是什么仓库
    if (warehouse.value === 'self') { // 自有仓库
        // 出库时间
        orderTable[currentSelect.value].out_warehouse.warehouse_name = `self`
        orderTable[currentSelect.value].out_warehouse.out_time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        // 运单号
        orderTable[currentSelect.value].out_warehouse.express_number = `SELF-${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${Math.floor(Math.random() * 10000)}`
        // 重新写入
        console.log(orderTable);
        localStorage.setItem('orderTable', JSON.stringify(orderTable));
        MessagePlugin.success({
            content: '出库成功'
        });
        window.location.reload()
        return;
    } else if (warehouse.value === 'jd') { // 京东仓
        orderTable[currentSelect.value].out_warehouse.warehouse_name = `jd`
        //重新写入
        localStorage.setItem('orderTable', JSON.stringify(orderTable));
        MessagePlugin.success({
            content: '通知京东发货成功',
        })
        window.location.reload();
        return;
    } else { // 没选择仓库
        MessagePlugin.error({
            content: '请选择出库的仓库'
        })
        return;
    }
}


// 是否有出库单待审核
const isOrder = ref(false)
// 出库单列表
const orderList = ref([]);

// 点击显示详情按钮
const showOrderDetail = (index) => {
    detailContent.data = orderList.value[index];
    currentSelect.value = index;
    isShowDetail.value = true
}


const __initiaze = () => {
    // 获取汇总
    let goodsMaps = localStorage.getItem('goodsMaps');
    let orderTables = localStorage.getItem('orderTables');
    goodsMaps = JSON.parse(goodsMaps);
    orderTables = JSON.parse(orderTables);
    let tmpGoods = [];
    // 获取哪些用户是购买了需要出库产品的
    goodsMaps.forEach((mapItem, mi) => {
        if (mapItem.out_time !== '') {
            tmpGoods.push(mapItem);
        }
    })

    localStorage.setItem('outsList', JSON.stringify(tmpGoods))
 
    orderList.value = tmpGoods
    isOrder.value = true



}
onMounted(() => {
    setInterval(() => {
        __initiaze();
    }, 5000)
})
</script>

<style scoped></style>